<template>
  <div class="c-bg-sgray">
    <my-small-tabbar :tabList="tabList" :tabIndex="type" @changeTab="changeType" class="c-bg-white"></my-small-tabbar>
    <div class="c-ph24 c-pv24">
      <div v-for="(item, index) in dataInfo" :key="index" class="c-ph24 c-br12 c-pv24 c-p c-mb24 c-bg-white" @click="goToVote(item.actId)">
        <div class="c-fc-xblack c-text-ellipsis1 c-fs24">{{item.name}}</div>
        <div class="c-fc-gray c-fs18 c-mt12">{{chageTime(item)}}</div>
        <div class="c-pa iconfont c-fc-ba c-p-r20 c-p-t0 c-p-b0 c-m-auto0 c-flex-center c-flex-row c-fs80" v-if="item.status == 4">&#xe97e;</div>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" :noDataText="'暂无相关记录'"></loading-status-tem>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import { utilJs } from "@/utils/common.js";
let limit = 10;
export default {
  name: 'MyVote',
  components: {
    MySmallTabbar,
    loadingStatusTem
  },
  props: [],
  beforeCreate() {
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      page: 1,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      type: 1,
      dataInfo: [],
      dataStatus: 'HAS_MORE_DATA',
      tabList: [{
        title: '我报名的活动',
        index: 1,
      }, {
        title: `我${localStorage.getItem("voteCustomName")}的活动`,
        index: 2,
      }]
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {

  },
  computed: {
    chageTime() {
      return function (data) {
        if (!data || !data.startAt) return ''
        let startTime = data.startAt.split(" ");
        startTime = startTime[0] ? startTime[0].replace(/\-/g, "\/") : '';
        let endTime = data.endAt.split(" ");
        endTime = endTime[0] ? endTime[0].replace(/\-/g, "\/") : '';
        let time = startTime && endTime ? `${startTime}~${endTime}` : '';
        return time;
      }
    }
  },
  watch: {},
  methods: {
    // 详情跳转
    goToVote(id) {
      this.$routerGo(this, "push", {
        path: '/homePage/voting/votingActivity',
        query: ({id: id})
      })
    },
    //切换
    changeType: function (type) {
      this.type = type;
      this.dataInfo = [];
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.getList();
    },
    //分页获取助力列表
    getList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      let that = this;
      let data = {
        page: that.page,
        limit: limit
      }
      let url = that.type == 1 ? 'activity/vote/myEnrolledAct' : 'activity/vote/myVotedAct';
      utilJs.postMethod(global.apiurl + url, data, function (res) {
        if (that.page == 1) {
          that.dataInfo = res.data;
        } else {
          that.dataInfo = [...that.dataInfo, ...res.data];
        }
        if (res.data && (res.data.length >= limit)) {
          that.dataStatus = 'HAS_MORE_DATA';
          that.page++;
        } else {
          that.dataStatus = that.dataInfo.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        }
      }, failRes => {
        that.dataStatus = 'DATA_ERROR';
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "投票活动", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("投票活动", "", shareUrl, "");
    },
    //下拉获取更多
    windowScrollFunction: function () {
      let that = this;
      utilJs.handleLoading(function () {
        if (that.dataStatus == 'HAS_MORE_DATA') {
          that.getList();
        }
      });
    }
  },
  activated() {
    setDocumentTitle(`${localStorage.getItem("voteCustomName")}活动`);// eslint-disable-line
    this.type = 1;
    this.dataInfo = [];
    this.page = 1;
    this.dataStatus = 'HAS_MORE_DATA';
    this.getList();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-fc-ba {
  color: #bababa;
}
</style>
